<template>
    <div class="login">
        <div class="loginTop">欢迎登录</div>
        <div class="loginContnet">
            <input type="text" name="phone" class="phone" placeholder="请输入手机号" v-model="phone"/>
            <input type="password" name="password" class="password" placeholder="请输入密码" v-model="password"/>
            <button class="btn" @click="Login">登录</button>
        </div>       
    </div>
</template>
<script>
import {getLoginUser} from '@/request/api/home'
export default {
    data(){
        return{
            phone:'',
            password:''
        }
    },
    methods:{
        Login:async function(){
           let res=await this.$store.dispatch('getLogin',{phone:this.phone,password:this.password});
           console.log(res);
           if(res.data.code===200){
            this.$store.commit('updateIsLogin',true);
            this.$store.commit('updateToken',res.data.token);
            let result=await getLoginUser(res.data.account.id);
            console.log(result);
            this.$store.commit('updateUser',result);
            this.$router.push('/infoUser');
           }else{
            alert(res.data.message);
            this.password='';
           }

        }
    }
}
</script>
<style lang="less" scoped>
.login{
    width: 100%;
    height: 13.34rem;
    padding: 0.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .loginTop{
        font-size: .4rem;
    }
    .loginContnet{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:.4rem ;
        .phone{
            width: 6rem;
            height: .7rem;
            margin: .2rem;
        }
        .password{
            width: 6rem;
            height: .7rem;
            margin: .2rem;
        }
        .btn{
            background-color: rgb(108, 108, 251);
            width: 2rem;
            height: .6rem;
            margin: .2rem;
            border: none;
            color: #fff;
        }
    }
}
</style>